<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xximg</title>
    <link href="css/style.css" rel="stylesheet">
    <style>
        img {
            display: block;
        }

        .xximg {
            opacity: 0;
            /*vertical-align: middle;*/
        }
    </style>
</head>
<body>
<div style="margin: 30px;">
    <a href="https://gitee.com/gx1727/xximg">源码</a>
    <a href="http://www.gx1727.com/static/xximg/index.html">DEMO1</a>
    <a href="http://www.gx1727.com/static/xximg/demo3.html">DEMO3</a>
</div>
<div style="border: 1px #f00 solid;">
    <div style="width: 143px;float: left;border: 1px #0f0 solid;">
        <img src="img/1.jpg" id="img" style="width:100%;" class="xximg" _xx_mod="elastic" _xx_height="parent.parent"/>
    </div>
    <div style="width: 800px;float: left;">
        <p>图片的高度随父级而定</p>
        <p>当父级的高级大于图片的计算高度时，自动调整图片到合适的高度</p>
        <xmp>
            <img src="img/2.jpg" style="width:100%;" class="xximg" _xx_mod="cutting" _xx_height="parent.parent"/>
        </xmp>
        <p>其中 _xx_height 为 parent.parent, 即为图片的高度采用父级的低级的高度</p>

        <p/>
    </div>
    <div style="clear: both;">
    </div>
</div>
<div style="height: 20px;"></div>
<div style="border: 1px #f00 solid;">
    <img src="img/1.jpg" style="width: 30%;height: 150px;" class="xximg" _xx_mod="elastic" _xx_autoresize="on"/>
    图片中响应resize事件， 设置 _xx_autoresize 为 true
    <xmp>
        <img src="img/1.jpg" style="width: 30%;height: 150px;" class="xximg" _xx_mod="elastic" _xx_autoresize="on"/>
    </xmp>
</div>
<div style="border: 1px #f00 solid;">
    <img src="img/1.jpg" style="width: 30%;height: 150px;" class="xximg" _xx_mod="cutting" _xx_autoresize="on"/>
    图片中响应resize事件， 设置 _xx_autoresize 为 true
    <xmp>
        <img src="img/1.jpg" style="width: 30%;height: 150px;" class="xximg" _xx_mod="cutting" _xx_autoresize="on"/>
    </xmp>
</div>
<div style="height: 200px;"></div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/xximg.js"></script>
<script>
    $(function () {
        $('.xximg').xximg();
    })
</script>
</body>
</html>